<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="date=no" />
    <title>搜索学校</title>
    <link href="../../css/api.css" rel="stylesheet" type="text/css">
    <link href="../../css/index.css" rel="stylesheet" type="text/css">
    <link href="../../css/data-flex.min.css" rel="stylesheet" type="text/css">
    <style>
        .search-wrapper {
            margin: 15px;
        }

        .container {
            margin: 15px;
            padding: 10px 10px 0 10px;
            background:rgba(255,255,255,1);
            box-shadow:0px 4px 10px 0px rgba(0,135,214,0.37);
            border-radius:10px;
        }

        .row {
            position: relative;
            height: 50px;
        }

        .row::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: rgb(212,212,212);
            transform: scaleY(0.5);
        }

        .row:last-child::after {
            display: none;
        }

        .radio {
            width: 22px;
            height: 22px;
            -webkit-appearance: none;
            background: url("../../image/ui/radio.png");
            background-size: 100% 100%;
        }

        .radio:checked {
            background: url("../../image/ui/checked.png");
            background-size: 100% 100%;
        }

        .name {
            font-size:15px;
            font-weight:500;
            color:rgba(25,25,25,1);
        }

        .cancel {
            font-size:15px;
            font-weight:500;
            color:rgba(255,255,255,1);
            margin-left: 15px;
        }

        .search {
            height:30px;
            background:rgba(255,255,255,0.26);
            border-radius:20px;
        }

        .search-icon {
            width: 15px;
            height: 15px;
            margin-left: 15px;
        }

        .form-text {
            font-size:14px;
            font-weight:500;
            color:rgba(255,255,255,1);
            text-indent: 6px;
        }

        .form-text::placeholder {
            font-size:14px;
            font-weight:500;
            color:rgba(255,255,255,1);
            text-indent: 6px;
        }

        .tips {
            height: 50px;
            font-size:14px;
            color:rgba(25,25,25,1);
        }
    </style>
</head>

<body class="blue-bg">
    <div class="vueApp" v-cloak>
        <div class="search-wrapper" data-flex="cross:center">
            <div class="search" data-flex-box="1" data-flex="cross:center">
                <div class="search-icon">
                    <img src="../../image/ui/search.png" alt="">
                </div>
                <input v-model="keyword" class="form-text" data-flex-box="1" type="text" placeholder="搜索">
            </div>
            <div class="cancel">
                取消
            </div>
        </div>
        <div class="container">
            <div class="tips" data-flex="main:center cross:center" v-show="tips">未找到任何数据</div>
            <div class="row" v-for="item in resultList" data-flex="main:justify cross:center">
                <div class="name">{{ item.name }}</div>
                <input class="radio" type="radio" name="school">
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-font.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-login.js"></script>
<script type="text/javascript" src="../../script/service/service-verify.js"></script>
<script>
    var $S;
    var USER;
    var data = [
        {
            name: '高家园小学'
        },
        {
            name: '北京朝阳区小学'
        },
        {
            name: '北京天通苑小学'
        },
        {
            name: '北京海淀区小学'
        }
    ];
    apiready = function() {
        $S = SERVICE();
        USER = USER();
        fnInit();
    }
    
    function fnInit() {
        vm = new Vue({
            el: ".vueApp",
            data: {
                keyword: '',
                tips: '',
                resultList: deepCopy(data),
                listData:  deepCopy(data)
            },
            watch: {
                keyword: function() {
                    var keyword = this.keyword;
                    this.resultList = this.listData.filter(function(item) {
                        return item.name.indexOf(keyword) !== -1;
                    })
                },
                resultList: function() {
                    if(this.resultList.length === 0) {
                        this.tips = true;
                    } else {
                        this.tips = false;
                    }
                }
            }
        })
    }
</script>


</html>